<template>
  <div class="container">
    <topbar />
    <div class="content evaluation-wrap clearfix" v-if="questionList.length">
      <div class="left-content">
        <div class="title">
          <span>电子卷信息</span>
          <ul class="video-list">
            <li v-for="(val, key, idx) in videoList" :key="idx" :class="[{'active': idx === videoIdx}]" @click="startPlayback(val.cameraIndex, 0, idx+1)">
              {{idx==0?"全景录像":"近景录像"}}
            </li>
          </ul>
        </div>
        <div id="playWnd" class="playWnd video-player-box"></div>
        <div class="img-container">
          <p class="title">考查得分图片</p>
          <div class="box-body" style="overflow:hidden;position: absolute;left:0;right:0;bottom:0;top:50px;">
            <div class='img-list-btn' :style="{'line-height':imgBtnLineHeight}" @click="imgViewIndex--">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class='img-list-btn' :style="{'line-height':imgBtnLineHeight, right: 0}" @click="imgViewIndex++">
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="img-list-view" :style="{left:imgViewLeft}">
              <img v-for="pic,i in picList" :key="i" @click="handleClickImg($event,i)" @error="handleImgError"
               src="http://experimentexam.oss-cn-beijing.aliyuncs.com/student/01.jpg"  :src="pic.url"  />
            </div>
          </div>
          <!--div class="swiper-container" v-if="false">
            <div class="swiper-wrapper">
              <div @click="showListPic(item.url)" class="swiper-slide" v-for="(item, idx) in picList" :key="idx">
                <img :src="item.url" @click="startPlayback(null, item.time)" class="car-pic">
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
          </div-->
        </div>
      </div>
      <div class="right-content">
        <p class="title">评分标准
          <a class="points" @click="showMarkPoint()" href="javascript:;">评分要点></a>
          <!--span class="content-scores">
            <span>得分</span>
            <span>不得分</span>
          </span-->
        </p>
        <ul class="list wst2">
          <li v-for="(step, index) in questionList" :key="index" >
            {{index+1}}.{{step.title}}
            <ul class="list-detail">
              <li v-for="(s, i) in step.rules" :key="i" >
                <p>({{i+1}}) {{s.checkRemark}} <span class="answer" v-if="s.examLine && s.examLine.remark">({{s.examLine && s.examLine.remark}})</span></p>
                <span class="score">
                  <!--el-radio-group v-model="s.checked" @change="changeScore">
                    <el-radio size="small " label="1">{{null}}</el-radio>
                    <el-radio label="0">{{null}}</el-radio>
                  </el-radio-group-->
                  <el-switch 
                    v-model="s.checked"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0"
                    :width="25"
                    @change="changeScore"
                  ></el-switch>
                </span>
              </li>
            </ul>
          </li>
        </ul>
        <div class="evaluation-score">
          <p>
            <span>总分: {{ totalScore }}分</span>
            <span>
              得分：<span>{{score}}分</span>
            </span>
            <a href="javascript:;" class="evaluation-finsh" v-if="isMarkingComplete" @click="updateScore">评卷完成</a>
            <a href="javascript:;" v-else>评卷未完成</a>
          </p>
        </div>
      </div>
    </div>
    <el-dialog title="提示" custom-class="c-dialog" :visible.sync="dialogVisible" width="30%" :center="true" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <p class="tip txt-center" style="font-size:14px;">您已批改完所有考生!</p>
      <span slot="footer" class="dialog-footer">
        <el-button class="c-btn" type="primary" @click="correctComplete">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" custom-class="c-dialog" :visible.sync="installPlayerVisible" width="30%" :center="true" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <p class="tip txt-center" style="font-size:14px;">未检测到视频播放插件。请先安装插件，再刷新页面。</p>
      <span slot="footer" class="dialog-footer">
        <el-button class="c-btn" type="primary" @click="downloadWebPlayer">立即安装</el-button>
      </span>
    </el-dialog>

    <el-dialog title="" :visible.sync="iSscoringPic" width="60%" :center="true" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="closeMarkPoint">
      <div style="width:100%;overflow: auto">
        <img :src="markPoint" alt="">
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="isListPicShow" width="90%" top="0" :center="true" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="closeMarkPoint">
      <div style="width:100%;overflow: auto;">
        <img :src="listPic" alt="">
      </div>
    </el-dialog>
    <img-view :imgInfo='imgInfo'  v-if="imgInfo.show"></img-view>
  </div>
</template>

<script>
import $ from 'jQuery'
import 'video.js/dist/video-js.css'
import topbar from '../components/Topbar.vue'
import ImgView from '../components/ImgView.vue'
// import { videoPlayer } from 'vue-video-player'
// import WebControl  from 'jsWebControl-1.0.0.min.js'
import { JSEncrypt } from 'jsencrypt'
import Swiper from 'swiper'

import commonMixin from '@/common/mixins/commonMixin'

export default {
  mixins: [commonMixin],
  components: {
    topbar,
    ImgView
    // videoPlayer
  },
  data() {
    return {
      imgInfo:[],
      imgViewIndex: 0,
      questionList: [],
      totalScore: 0,
      totalNum: 0,
      score: 0,
      isMarkingComplete: false,
      picList: [],
      videoList: [],
      videoIdx: 0,
      oWebControl: null, // 插件对象
      bIE: (!!window.ActiveXObject || 'ActiveXObject' in window), // 是否为IE浏览器
      pubKey: '',
      iLastCoverLeft: 0,
      iLastCoverTop: 0,
      iLastCoverRight: 0,
      iLastCoverBottom: 0,
      initCount: 0,
      endTime: this.dateFormat(new Date(), 'yyyy-MM-dd 23:59:59'),
      startTime: this.dateFormat(new Date(), 'yyyy-MM-dd 00:00:00'),

      playerOp: {
        cover: false,
        appkey: '20802610',
        enableHTTPS: 1,
        secret: 'WSMGrCNXVuZbuV9Ib64c',
        ip: '101.71.159.153',
        port: 9999,
        snapDir: 'D:\SnapDir',
        layout: '1x1',
        cameraIndexCode: null,
        startTimeStamp: null,
        endTimeStamp: null,
        timeBarLevel: 6
      },
      markInfoId: null,
      scoreJson: {},
      dialogVisible: false,
      installPlayerVisible: false,
      videoPluginUrl: null,
      iSscoringPic: false,
      markPoint: "",
      isListPicShow: false,
      listPic: "",
      roluPicList: [null,
        [1, 2, 2, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1],
        [1, 1, 2, 2, 1],
        [1, 2, 1, 2, 2, 1],
        [1, 2, 2, 1, 2, 1],
        [1, 2, 2, 2, 2, 1],
        [1, 1, 2, 2, 1]
      ]
    }
  },
  created() {
    this.getExamInfo()
    // this.initPlugin()
  },
  mounted() {
    // 窗口resize
    window.addEventListener('resize' , () => {
      if(this.oWebControl) {
        if(!this.playerOp.cover){
          this.oWebControl.JS_Resize($('#playWnd').width(), $('#playWnd').height())
        }
      }
    })
  },
  methods: {
    updateQuestionList(){
      let questionList = [...this.questionList]
      this.questionList = questionList
    },
    handleClickImg(e, i){
      //console.log(e)
      this.setWndCover && this.setWndCover(true)
      this.imgInfo = {
        show: true,
        src: e.target.src,
        picList: this.picList,
        currentIndex: i,
        handlCancleEvent: () => {this.setWndCover && this.setWndCover(false)},
      }
    },
    // 下载插件
    downloadWebPlayer() {
      window.open(this.videoPluginUrl)
    },
    // 批改完成 退出
    correctComplete() {
      this.$http.logout('').then(res => {
        this.$router.push({ name: 'login' })
        sessionStorage.clear()
      })
    },
    // 上传考生的评卷结果
    updateScore() {
      let that = this
      let qsData = {
        markInfoId: that.markInfoId,
        scoreJson: JSON.stringify(that.scoreJson).replace(/\{/g, '%7B').replace(/\}/g, '%7D')
      }
      that.$http.updateScore(qsData).then(res => {
        that.getExamInfo()
      })
    },
    // 格式化时间
    dateFormat(oDate, fmt) {
      let o = {
        'M+': oDate.getMonth() + 1, // 月份
        'd+': oDate.getDate(), // 日
        'h+': oDate.getHours(), // 小时
        'm+': oDate.getMinutes(), // 分
        's+': oDate.getSeconds(), // 秒
        'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
        'S': oDate.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
    // 获取考生考试信息
    getExamInfo() {
      let that = this
      that.$http.getNextStudent().then(res => {
        if (res.code === 20000) {
          that.questionList = res.data.scoreRulesLines
          that.markInfoId = res.data.markInfoId
          this.markPoint = res.data.markPoint
          let plist = res.data.pic || [];
          let currRolu = this.roluPicList[res.data.paperNo];
          this.picList = []
          currRolu.forEach((item,i) => {
            this.picList.push({
              url: plist[i]['picUrl' + item],
              time: plist[i].picStartTime
            })
          })
          that.videoList = res.data.video
          that.playerOp.ip = res.data.apiIp
          that.playerOp.port = res.data.apiPort
          that.videoPluginUrl = res.data.videoPlugin

          that.initPlugin()
          that.statisticalScore()
          that.$nextTick(() => {
            that.initSwiper()
          })
        } else if (res.code === 5100) {
          that.questionList = []
          that.dialogVisible = true
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    initSwiper() {
      new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 8,
        slidesPerGroup: 3,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },
    // 统计总分
    statisticalScore() {
      let _score = 0
      this.totalNum = 0
      this.questionList.map(item => {
        this.totalNum += item.rules.length
        item.rules.map(question => {
          _score += question.reqNum ? parseInt(question.reqNum) : 0
        })
      })
      this.totalScore = _score
    },
    // 打分数
    changeScore() {
      let _score = 0
      let _checkNum = 0
      this.scoreJson = {}
      this.questionList.map(item => {
        item.rules.map(question => {
          if (question.checked) {
            _checkNum++
          }
          if (question.checked === '1') {
            _score += question.reqNum ? parseInt(question.reqNum) : 0
            this.scoreJson[question.id] = 'right'
          } else {
            this.scoreJson[question.id] = 'wrong'
          }
        })
      })
      this.score = _score
      if (_checkNum === this.totalNum) {
        this.isMarkingComplete = true
      } else {
        this.isMarkingComplete = false
      }
    },
    // 初始化插件
    initPlugin() {
      let that = this
      that.oWebControl = new WebControl({
        szPluginContainer: 'playWnd',
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        cbConnectSuccess: () => {
          that.setCallbacks()
          that.oWebControl.JS_StartService('window', {
            dllPath: './VideoPluginConnect.dll'
          }).then(function () {
            that.oWebControl.JS_CreateWnd('playWnd', $('#playWnd').width(), $('#playWnd').height()).then(function () {
              console.log('JS_CreateWnd success')
              // 初始化视频
              if (that.oWebControl) {
                that.getPubKey(that.initPlayer)
              }
            })
          }, function () {
          })
        },
        cbConnectError: () => {
          that.oWebControl = null
          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
          WebControl.JS_WakeUp('VideoWebPlugin://')
          that.initCount++
          if (that.initCount < 3) {
            setTimeout(function () {
              that.initPlugin()
            }, 3000)
          } else {
            // $('#playWnd').html('插件启动失败，请检查插件是否安装！')
            that.installPlayerVisible = true
          }
        },
        cbConnectClose: function () {
          console.log('cbConnectClose')
          that.oWebControl = null
        }
      })
    },
    // 获取公钥
    getPubKey(callback) {
      let that = this
      that.oWebControl.JS_RequestInterface({
        funcName: 'getRSAPubKey',
        argument: JSON.stringify({
          keyLength: 1024
        })
      }).then(function (oData) {
        console.log(oData)
        if (oData.responseMsg.data) {
          that.pubKey = oData.responseMsg.data
          console.log(that.pubKey)
          callback()
        }
      })
    },
    // 设置窗口控制回调
    setCallbacks() {
      this.oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: this.cbIntegrationCallBack
      })
    },
    // 推送消息
    cbIntegrationCallBack(oData) {
      console.log(oData.responseMsg)
    },
    showCBInfo(oData) {
      console.log(oData, oData.responseMsg)
    },
    // RSA加密
    setEncrypt(value) {
      let encrypt = new JSEncrypt()
      encrypt.setPublicKey(this.pubKey)
      return encrypt.encrypt(value)
    },
    // 初始化
    initPlayer() {
      let that = this
      var appkey = that.playerOp.appkey
      var secret = that.setEncrypt(that.playerOp.secret)
      var ip = that.playerOp.ip
      var port = that.playerOp.port
      var snapDir = that.playerOp.snapDir
      var layout = that.playerOp.layout
      var encryptedFields = ['secret']
      encryptedFields = encryptedFields.join(',')

      if (!appkey) {
        this.showCBInfo('appkey不能为空！', 'error')
        return
      }
      if (!secret) {
        this.showCBInfo('secret不能为空！', 'error')
        return
      }
      if (!ip) {
        this.showCBInfo('ip不能为空！', 'error')
        return
      }
      if (!port) {
        this.showCBInfo('端口不能为空！', 'error')
        return
      } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test(port)) {
        this.showCBInfo('端口填写有误！', 'error')
        return
      }

      this.oWebControl.JS_RequestInterface({
        funcName: 'init',
        argument: JSON.stringify({
          appkey: appkey,
          secret: secret,
          enableHTTPS: 1,
          ip: ip,
          playMode: 1, // 回放
          port: port,
          snapDir: snapDir,
          layout: layout,
          encryptedFields: encryptedFields,
          timeBarLevel: 6
        })
      }).then(function (oData) {
        that.startPlayback()
      })
    },
    // 录像回放
    startPlayback(cameraIndex = null, time = null, idx = null) {
      this.videoIdx = idx ? idx - 1 : this.videoIdx
      let _video = this.videoList['video' + (this.videoIdx + 1)]
      let cameraIndexCode = _video.cameraIndex
      let startTimeStamp = time ? new Date(time).getTime() : _video.startTimeStamp * 1000
      let endTimeStamp = _video.endTimeStamp * 1000
      let recordLocation = 0
      let transMode = 1
      let gpuMode = 0
      if (!cameraIndexCode) {
        this.showCBInfo('监控点编号不能为空！', 'error')
        return
      }
      if (Number.isNaN(+startTimeStamp) || Number.isNaN(+endTimeStamp)) {
        this.showCBInfo('时间格式有误！', 'error')
        return
      }
      this.oWebControl.JS_RequestInterface({
        funcName: 'startPlayback',
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode,
          startTimeStamp: Math.floor(startTimeStamp / 1000),
          endTimeStamp: Math.floor(endTimeStamp / 1000),
          recordLocation: recordLocation,
          transMode: transMode,
          gpuMode: gpuMode
        })
      }).then(function (oData) {
        console.log(oData)
      })
    },
    // 停止回放
    stopAllPlayback() {
      this.oWebControl.JS_RequestInterface({
        funcName: 'stopAllPlayback'
      }).then(function (oData) {
        this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''))
      })
    },
    // 销毁播放组件
    uninit() {
      let that = this
      // 反初始化
      this.oWebControl.JS_RequestInterface({
        funcName: 'uninit'
      }).then(function (oData) {
        console.log(oData)
      })

      // 销毁
      this.oWebControl.JS_RequestInterface({
        funcName: 'destroyWnd'
      }).then(function (oData) {
        console.log(oData)
      })

      if (this.bIE) {
        if (this.oWebControl != null) {
          this.oWebControl.JS_Disconnect().then(function () {
            console.log('JS_Disconnect')
          }, function () { })
        }
      } else {
        if (this.oWebControl != null) {
          this.oWebControl.JS_DestroyWnd().then(function () {
            console.log('JS_DestroyWnd')
          }, function () { })
          this.oWebControl.JS_StopService('window').then(function () {
            that.oWebControl.JS_Disconnect().then(function () {
              console.log('JS_Disconnect')
            }, function () { })
          })
        }
      }
    },
    setWndCover (cover) {
      if(!this.oWebControl) return
      this.playerOp.cover = cover
      if(cover || this.selectedVideoIndex === -1){
        this.oWebControl.JS_Resize(1, 1)
        $('#playWnd').hide()
      }else{
        $('#playWnd').show()
        this.oWebControl.JS_Resize($('#playWnd').width(), $('#playWnd').height())
      }
    },
    //评分要点
    showMarkPoint(url) {
      //this.oWebControl.JS_SetWndCover('right', 690);
      // window.removeEventListener("scroll",()=>{});
      this.setWndCover(true)
      this.iSscoringPic = !this.iSscoringPic;
    },
    showListPic(url) {
      //this.oWebControl.JS_SetWndCover('right', 690);
      this.setWndCover(true)
      this.isListPicShow = !this.isListPicShow;
      this.listPic = url;
    },
    closeMarkPoint(done) {
      //this.oWebControl.JS_SetWndCover('right', 0);
      this.setWndCover(false)
      this.iSscoringPic = false;
      this.isListPicShow = false;
      done();
    }
  },
  computed:{
    imgBtnLineHeight () {
      return ((this.DcSize.height - 90) * 0.3 - 70) + 'px'
    },
    imgViewLeft(){
      let count = this.picList ? this.picList.length : 0
      let imgViewWidth = document.getElementsByClassName('img-list-view')[0] ? document.getElementsByClassName('img-list-view')[0].offsetWidth : 0
      let imgViewBoxWidth = ((this.DcSize.width - 20) * 0.6 - 20) 
      let left = 0
      this.imgViewIndex = this.imgViewIndex > 0 ? this.imgViewIndex : 0
      this.imgViewIndex = this.imgViewIndex < count ? this.imgViewIndex : count
      for(let i = 0; i < this.imgViewIndex && i<count; i++){
        left += document.getElementsByClassName('img-list-view')[0].getElementsByTagName('img')[i].offsetWidth + 11
      }
      if(imgViewWidth < imgViewBoxWidth+ left && imgViewWidth !== 0){
        left = imgViewWidth - imgViewBoxWidth - 11
        this.imgViewIndex--
      }
      left = left > 0 ? left : 0
      return -left + 'px'
    },
  },
  beforeDestroy() {
    this.uninit()
  }
}
</script>

<style>
.el-radio__inner {
  width: 16px;
  height: 16px;
}

.img-list-btn {
  position: absolute;
  bottom: 0px;
  top: 10px;
  width: 40px;
  background: rgba(0,0,0,0.2);
  z-index: 2;
  cursor:pointer;
  color: white;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  display: none;
}
.box-body:hover .img-list-btn{
  display: block;
}
.img-list-btn:hover {
  background: rgba(0,0,0,0.5);
}
.img-list-view {
  height: 100%;
  padding: 10px 0;
  white-space: nowrap;
  position: absolute;
  transition: all 0.2s;
  font-size: 0px;
}
.img-list-view img{
  height: 100%;
  margin-right: 10px;
  cursor: pointer;
  user-select:none;
}
</style>
<style lang="stylus" scoped>
.container {
  padding: 0;
  overflow:hidden;
  position: relative;
  height: 100%;
}

.content {

  &.evaluation-wrap {
    position: absolute;
    top: 80px;
    left: 20px;
    bottom: 0;
    right: 0;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    border-left: 4px solid #4177ff;
    height: 24px;
    line-height: 24px;
  }
  >div{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right:0;
    margin: 0 20px 20px 0;    
    box-sizing: border-box;
  }
  
  .left-content {
    right: 40%;
    
    .playWnd {
      position: absolute;
      left: 0;
      top: 40px;
      bottom: 30%;
      right:0;
      box-sizing: border-box;
    }
    
    .img-container {
      position: absolute;
      top: 70%;
      left: 0;
      right:0;
      bottom: 0;
      box-sizing: border-box;
      padding-top: 20px;
    }
  }

  .right-content {
    left: 60%;

    .points {
      color: #4177FF;
      font-size: 16px;
      font-weight: 390;
      margin-left: 46px;
    }

    .content-scores {
      float: right;
      width: 140px;

      span {
        margin-left: 20px;
        height: 18px;
        font-size: 20px;
        font-weight: 390;
        color: rgba(0, 0, 0, 1);
      }
    }

    .list {
      position: absolute;
      top: 40px;
      bottom: 65px;
      right:0;
      left:10px;
      overflow: auto;

      li {
        font-size: 18px;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
      }
    }

    .list-detail {
      li {
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        color: #000;
        width: calc(100% - 140px);
        position: relative;
        padding: 4px;

        .score {
          position: absolute;
          width: 100px;
          right: -100px;
          top: 0;
          text-align: center;
          text-align: right;

          label {
            &:nth-child(2) {
              margin-right: -20px;
              margin-left: 40px;
            }
          }
        }
      }
    }

    .evaluation-score {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 58px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 8px 0px rgba(165, 165, 165, 0.35);

      p {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;

        span {
          line-height: 58px;

          &:nth-child(1) {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
          }

          &:nth-child(2) {
            font-size: 20px;

            span {
              font-size: 24px;
              font-weight: bold;
              color: rgba(65, 119, 255, 1);
            }
          }
        }

        a {
          display: inline-block;
          width: 174px;
          height: 36px;
          background: rgba(157, 157, 157, 1);
          border-radius: 4px;
          text-align: center;
          margin-top: 11px;
          line-height: 36px;
          font-size: 20px;
          color: #fff;
          text-decoration: none;

          &.evaluation-finsh {
            background: rgba(65, 119, 255, 1);
          }
        }
      }
    }
  }
}


.car-pic {
  background-size: cover;
  background-position: center;
  width: 100%;
}
</style>
<style lang="scss" scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css");
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.video-list {
  display: inline-block;
  font-size: 16px;
  color: #555555;
  margin-left: 20px;
  li {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    &.active {
      color: #4177ff;
      position: relative;
      &::after {
        content: "";
        width: 10px;
        height: 3px;
        position: absolute;
        bottom: -5px;
        background-color: #4177ff;
        left: calc(50% - 5px);
      }
    }
  }
}
.answer {
  color: #ff0000;
}
</style>
